<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '考试须知',
  },
}
</route>
<template>
  <view :style="{ paddingTop: safeAreaInsets?.top + 'px' }" class="entire">
    <view class="title-view">
      <text class="title-text">{{ examInfo.examTitle || '考试标题' }}</text>
    </view>

    <view class="time-view">
      <text class="time-text">
        {{ examInfo.examStartTime || '开始时间' }} - {{ examInfo.examEndTime || '结束时间' }}
      </text>
    </view>

    <view class="info-view2">
      <text class="info-text">考试时长 {{ examInfo.examLength || 0 }}分钟</text>
    </view>

    <view class="info-view2">
      <text class="info-text">考试次数 {{ examInfo.testTimes || 0 }}次</text>
    </view>

    <view class="info-view2">
      <text class="info-text">
        考试总分 {{ examInfo.passScore || 0 }}/{{ examInfo.examScore || 0 }}
      </text>
    </view>

    <view class="divider"></view>

    <view class="notice-title-view">
      <text class="notice-title-text">考前须知</text>
    </view>

    <view class="notice-subtitle-view" v-for="(item, index) in examInfo.examRuleList" :key="index">
      <text class="notice-subtitle-text">{{ item }}</text>
    </view>

    <view class="start-btn-view">
      <button class="start-btn" @click="startExam">开始考试</button>
    </view>
  </view>
</template>

<script setup>
import { getExaminationInformation } from '@/service/exam/exam'

const safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
const senduserId = ref(0)
const examInfo = reactive({
  examId: 0,
  examTitle: '',
  examScore: 0,
  examLength: 0,
  passScore: 0,
  percentScore: 0,
  examShowWay: 1,
  examStartTime: '',
  examEndTime: '',
  resultFlag: 0,
  publishedFlag: 1,
  examRules: null,
  examRuleList: null,
  userRemainingTime: 0,
  allowLeavePageTimes: 0,
  userLeavePageTimes: 0,
  startCheating: 0,
  testTimes: 0,
  relationType: 0,
})

// 加载考试信息
const loadExamInfo = async () => {
  const res = await getExaminationInformation(senduserId.value)
  if (res.code === 200 && res.data?.info) {
    // 将API返回的考试信息赋值给页面数据
    Object.assign(examInfo, res.data.info)
  } else {
    uni.showToast({
      title: res.message || '获取考试信息失败',
      icon: 'none',
    })
  }
}

// 开始考试
const startExam = () => {
  uni.navigateTo({
    url: `/pages-sub/exam/examRoom/examRoom?id=${senduserId.value}`,
  })
}

onLoad((option) => {
  // 从URL参数中获取考试ID
  if (option.id) {
    senduserId.value = parseInt(option.id)
    // 加载考试信息
    loadExamInfo()
  } else {
    uni.showToast({
      title: '缺少考试ID参数',
      icon: 'none',
    })
  }
})
</script>

<style scoped lang="scss">
.entire {
  width: 750rpx;
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.title-view {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #234776;
}

.time-view {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.time-text {
  font-size: 28rpx;
  color: #234776;
}

.info-view {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.info-view2 {
  width: 100%;
  display: flex;
  margin-top: 50rpx;
  padding-left: 40rpx;
}

.info-text {
  font-size: 28rpx;
  color: #234776;
}

.divider {
  width: 100%;
  height: 1rpx;
  background: linear-gradient(
    90deg,
    rgba(224, 224, 224, 0),
    rgb(185, 185, 185) 20%,
    rgb(185, 185, 185) 50%,
    rgb(185, 185, 185) 80%,
    rgba(224, 224, 224, 0)
  );
  margin-top: 40rpx;
}

.notice-title-view {
  width: 100%;
  display: flex;
  margin-top: 40rpx;
  padding-left: 80rpx;
}

.notice-title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #234776;
}

.notice-subtitle-view {
  width: 100%;
  display: flex;
  padding-left: 60rpx;
  margin-top: 20rpx;
  color: #333333;
}

.notice-subtitle-text {
  font-size: 28rpx;
}

.notice-content-view {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 30rpx;
  padding-left: 50rpx;
}

.notice-content-text {
  font-size: 28rpx;
  color: #333333;
}

.notice-item-view {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;
  padding-left: 50rpx;
}

.notice-item-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
}

.start-btn-view {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
  margin-bottom: 60rpx;
}

.start-btn {
  width: 500rpx;
  height: 70rpx;
  background-color: #234776;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
